<script setup lang="ts">
import { PAGING } from '@/constant'
import { Search } from '@element-plus/icons-vue'
import type { TableColumn } from '@/types'
import { ElButton } from 'element-plus'

const loading = ref(false)
const columns: TableColumn<any>[] = [
  {
    key: uuid(),
    label: '报告编号',
    prop: 'a',
  },
  {
    key: uuid(),
    label: '核算主体',
    prop: 'a',
  },
  {
    key: uuid(),
    label: '核算标准',
    prop: 'b',
  },
  {
    key: uuid(),
    label: '核算时间',
    prop: 'c',
  },
  {
    key: uuid(),
    label: '更新时间',
    prop: 'e',
  },
]
const tableData = shallowRef([])
const pagination = reactive({
  pageNumber: PAGING.PARAMS.pageNumber,
  pageSize: PAGING.PARAMS.pageSize,
  total: 0,
})
const tanpanchaStore = useTanpanchaStore()
const protocol = ref()
const year = ref()
const point = ref()

async function handleClickNode(node: any) {
  point.value = node.id
  await nextTick()
  getTableData()
}

function getList(params: any) {
  return new Promise<any>((resolve) => {
    setTimeout(() => {
      resolve({
        records: [],
        total: 0,
      })
    }, 200)
  })
}

async function getTableData() {
  loading.value = true
  try {
    const data = await getList({
      pageNumber: pagination.pageNumber,
      pageSize: pagination.pageSize,
      protocol: unref(protocol),
      year: unref(year),
      point: unref(point),
    })
    tableData.value = data.records ?? []
    pagination.total = data.total
  }
  catch (error) {
    console.log(error)
  }
  finally {
    loading.value = false
  }
}

async function clickSearch() {
  pagination.pageNumber = 1
  await nextTick()
  getTableData()
}
</script>

<template>
  <div class="padding-sm flex container">
    <ReadonlyPointTree
      fire
      class="flex-incompressible"
      @click-node="handleClickNode"
    />
    <div
      class="flex-direction flex-fillRemaining margin-left-sm overflow flex align-end"
    >
      <view-table
        :loading="loading"
        :columns="columns"
        :data="tableData"
        :show-toolbox="false"
        border
        row-key="id"
        :operate-width="200"
      >
        <template #actions>
          <ElForm inline>
            <ElFormItem label="核算标准">
              <ElSelect v-model="protocol" clearable placeholder="请选择标准">
                <ElOption
                  v-for="item in tanpanchaStore.standards"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
            <ElFormItem label="核算时间">
              <ElDatePicker
                v-model="year"
                type="year"
                placeholder="选择日期"
                format="YYYY"
                value-format="YYYY"
              />
            </ElFormItem>
            <ElFormItem>
              <ElButton
                type="primary"
                :icon="Search"
                @click="clickSearch"
              >
                查询
              </ElButton>
            </ElFormItem>
          </ElForm>
        </template>
        <template #operate="{ row }">
          <ElButton type="success" size="small">
            下载
          </ElButton>
          <ElButton type="danger" size="small">
            删除
          </ElButton>
        </template>
      </view-table>

      <!-- 分页 -->
      <ListsPagination
        v-model:page-num="pagination.pageNumber"
        v-model:page-size="pagination.pageSize"
        :total="pagination.total"
        @current-change="getTableData"
        @size-change="getTableData"
      />
    </div>
  </div>
</template>
